<template>
  <div class="success-container">

    <ul class="pay_success">
      <div class="weix">
        <!-- <img src="https://img.wifenxiao.com/h5-wfx/images/public/payment/weix.png"> -->
          <div class="accountInfo">{{accountInfo.nickname}}</div>
          <span  v-html="scaleGoodsPriceFn(payment)"></span>
      </div>
      <li style="border-bottom: 1px solid #ededed;border-top: 1px solid #ededed;">
        <div class="left">支付方式</div>
        <div class="right">微信支付</div>
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <van-button
        @click="tabMim()"
        class="btn buy-gra-btn"
        round
        plain
        hairline
        >确认{{btnContent}}</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { agentCollectApply, depositApply } from "@/api/order/order.js";
import goodsInfo from '@/views/order/buy/components/goodsInfo/index.vue'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  data() {
    return {
      payment: '0.00',
      extraData: {},
      btnContent: '支付',
      type: 0, // 1:结算 2：充值
      accountInfo: {},
      showTongLian: false,
      remark: -1
    };
  },
  components: {
    goodsInfo,
  },
  created() {
    this.accountInfo = __wxConfig.accountInfo
    this.type = this.$route.query.pay_type
    this.remark = 1
    this.init();
  },
  mounted() {
    window.addEventListener('wxshow', () => {
      let options = wx.getEnterOptionsSync();
      if (options.scene == '1038' && options.referrerInfo.appId=='wxef277996acc166c3' && this.remark == 2) {
        // 代表从收银台小程序返回
        let extraData = options.referrerInfo.extraData;
        // console.log('extraData', extraData)
        if (!extraData) {
          // "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
          if (this.type == 1) {
            this.Jump('/order-lists')
          } else if (this.type == 2) {
            this.Jump('/member')
          }
        } else {
          if (extraData.code == 'success') {
            this.$Error(this.btnContent + '成功')
          } else if (extraData.code == 'cancel') {
            this.$Error(this.btnContent + '已取消')
          // "支付已取消";
          } else {
            this.$Error(this.btnContent + '失败'+ extraData.errmsg)
          }
          setTimeout(() => {
            // console.log('type', this.type, extraData.code)
            if (this.type == 1) {
              if (extraData.code == 'success') {
                this.Jump('/order-lists',{type:6})
              } else {
                this.Jump('/order-lists',{type:2})
              }
            } else if (this.type == 2 && extraData.code == 'success') {
              this.Jump('/member')
            }
          }, 200)
        }
      }
    }),
    window.addEventListener('wxHide', () => {
      this.remark = 2
    })
  },
  methods: {
    /**
     * 商品价格 整数放大
     */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data);
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      // this.id = this.$route.query.id
      if (this.$route.query.order_id) {
        if (this.$route.query.pay_type != 2) {
          // this.btnContent = '支付'
          const data = {
            order_id: this.$route.query.order_id,
            pay_type: this.$route.query.pay_type
          };
          agentCollectApply(data).then((res) => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.extraData = res.data.jsApiParameters
              this.payment = res.data.payment
            } else {
              this.$Error(res.msg);
            }
          });
        } else if (this.$route.query.pay_type == 2) {
          depositApply({
            balance_id: this.$route.query.order_id
          }).then((res) => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.extraData = res.data.jsApiParameters
              this.payment = res.data.payment
            } else {
              this.$Error(res.msg);
            }
          });
        }

      } else if (this.$route.query.balance_id) {
        this.type = 2
        // this.btnContent = '充值'

      } else {
        this.$Error('糟糕！出错啦')
        setTimeout(() => {
          this.$router.go(-1)
        }, 1000)
      }

    },
    tabMim() {
      wx.openEmbeddedMiniProgram({
        appId: 'wxef277996acc166c3',
        extraData: this.extraData,
        success(res) {
          // console.log('详情success', res)
        },
        fail(errormsg) {
          // console.log('详情fail', errormsg)
        }
      })
    },
  }
});
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/publicSuccess/index";
.weix {
  img {
    width: 20%;
    padding: 100px 0 50px 0;
    margin: 0 auto;
  }
  text-align: center;
  padding: 100px 0 50px 0;
  .accountInfo {
    font-size: 28px;
    margin-bottom: 30px;
  }
  // .payment {
  //   font-size: 28px;
  // }
}
.weix .price-scale .num-font{
  font-size: 50px !important;
}
.donation-box{
  .title {
    font-size: 35px;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
  }
  .con-box{
    position:relative;
    padding:40px 60px;
  }
  .input-box{
    margin:16px 0;
    font-size:28px;
    label{
      float:left;
      display:block;
      width:150px;
      line-height:76px;
      text-align:right;
      font-weight:normal;
      color: #666666;
    }
    input{
      float:left;
      -webkit-appearance: none;
      width:256px;
      height:76px;
      padding:16px 10px;
      border:2px solid #EDEDED;
      border-radius:6px;
    }
  }
}
</style>